<template>
  <!-- 首页 -->
  <div class="home-page">
    <!-- 英雄区 -->
    <!-- 使用英雄区组件 -->
    <HeroSection />
    <!-- 产品服务 -->
    <!-- 使用产品服务组件 -->
    <ServiceSection />

    <!-- 产品介绍 -->
    <ProductSection />
    <!-- 企业优势 -->
    <h2
      style="
        text-align: center;
        font-size: 32px;
        font-weight: bold;
        color: #333;
        line-height: 1.3;
      "
    >
      AI赋能引领时代
    </h2>
    <AdvantageSection />

    <!-- 底部轮播图区域 -->
    <Carousel />

    <!-- 联系方式 -->
    <ContactSection />
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import { getTheCode } from "@/api/login.js";
import HeroSection from "@/components/Home/HeroSection.vue"; // 引入英雄区组件
import ServiceSection from "@/components/Home/ServiceSection.vue"; //引入产品服务组件
import ProductSection from "@/components/Home/ProductSection.vue"; //引入产品介绍组件
import AdvantageSection from "@/components/Home/AdvantageSection.vue"; //引入企业优势组件
import Carousel from "@/components/Home/Carousel.vue"; //引入底部轮播图组件
import ContactSection from "@/components/Home/ContactSection.vue"; //引入联系方式组件
import NavBar from "@/components/NavBar.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "Home",
  components: {
    NavBar,
    Footer,
    HeroSection,
    ServiceSection,
    ProductSection,
    AdvantageSection,
    Carousel,
    ContactSection,
  },
  data() {
    return {
      form: {
        name: "",
        phone: "",
        email: "",
        message: "",
      },
    };
  },
  computed: {
    // 引用user模块的state
    ...mapState("user", ["username", "token"]),
    // 调用user模块的action
    ...mapActions("user", ["login"]),
    ...mapGetters("user", ["isLogin"]),
  },
  mounted() {
    // 获取产品介绍区域元素
    const element = document.getElementById("product-section");
    const elementFooter = document.getElementById("footer");
    console.log("获取首页路由信息", window.location, element, elementFooter);
    // 如果是联系我们和关于我们 定位底部footer位置
    if(window.location.hash ==='#/index?aboutUs=true' || window.location.hash ==='#/index?contactUs=true'){
      this.scrollToProductSection(elementFooter);
    }
    // 如果是产品介绍页面  定位产品介绍位置
    if(window.location.hash ==='#/index?productIntroduce=true'){
      this.scrollToProductSection(element);
    }
    // 如果当前再首页刷新浏览器  清空描点定位
    if (window.location.hash === "#/index") {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
      window.history.pushState(null, null, "#/");
      return;
    }

    // 获取产品介绍区域元素
    // const element = document.getElementById("product-section");
    // const elementFooter = document.getElementById("footer");
    // console.log("首页获取footer", elementFooter);
    // if (element) {
    //   // 延迟执行滚动，确保页面完全渲染
    //   setTimeout(() => {
    //     this.scrollToProductSection(element);
    //   }, 100);
    // }
  },
  // 添加watch来监听路由变化
  // watch: {
  //   '$route'(to) {
  //     if (to.query && to.query.productCenter) {
  //       setTimeout(() => {
  //         this.scrollToProductSection();
  //       }, 100);
  //     }
  //   }
  // },
  watch: {
    // 监听路由对象的变化
    $route(to, from) {
      // 获取产品介绍区域元素
      const element = document.getElementById("product-section");
      const elementFooter = document.getElementById("footer");
      if (to.query.productIntroduce) {
        this.scrollToProductSection(element);
      } else if (to.query.aboutUs || to.query.contactUs) {
        this.scrollToProductSection(elementFooter);
      }
      console.log("获取两个元素信息", element, elementFooter);
      console.log("首页路由变化了-----------------------", to, from);
    },
  },
  methods: {
    // 滚动到产品介绍区域
    scrollToProductSection(element) {
      if (element) {
        // 滚动到该元素位置
        element.scrollIntoView({
          behavior: "smooth",
          block: "start",
        });
      }
    },
    submitForm(formName) {
      console.log("登录成功");
      // this.isLogin
      // this.$store.dispatch('user/login', { username: 'test', password: '123' }).then(() => {
      //   console.log('登录成功', this.token, this.username, );
      // });

      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     this.$message.success("提交成功!");
      //     // 这里可以添加表单提交逻辑
      //   } else {
      //     this.$message.error("请填写完整信息!");
      //     return false;
      //   }
      // });
    },
  },
};
</script>

<style scoped>
/* 全局样式 */
.container {
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 英雄区样式 */
.hero {
  /* background-color: #f5f7fa; */
  /* padding: 15px 0; */
}

.hero .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero-content {
  max-width: 600px;
}

.hero-content h1 {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.hero-content p {
  font-size: 18px;
  color: #666;
  margin-bottom: 30px;
}

.hero-buttons {
  display: flex;
  gap: 20px;
}

.hero-image img {
  max-width: 100%;
  height: auto;
}

/* 产品服务样式 */
.services {
  padding: 80px 0;
}

.section-title {
  text-align: center;
  margin-bottom: 50px;
}

.section-title h2 {
  font-size: 30px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.section-title p {
  font-size: 16px;
  color: #666;
}

.service-cards {
  display: flex;
  gap: 30px;
}

.service-card {
  flex: 1;
  text-align: center;
  padding: 30px;
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-icon {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.service-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.card-link {
  color: #409eff;
}

/* 产品介绍样式 */
.product-intro {
  padding: 80px 0;
  background-color: #f5f7fa;
}

.product-content {
  display: flex;
  align-items: center;
  gap: 50px;
}

.product-image {
  flex: 1;
}

.product-image img {
  max-width: 100%;
  height: auto;
}

.product-details {
  flex: 1;
}

.product-details h3 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.product-details p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

.product-features {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.product-features li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #666;
}

.product-features i {
  color: #409eff;
  margin-right: 10px;
}

/* 企业优势样式 */
.advantages {
  padding: 80px 0;
}

.advantage-cards {
  display: flex;
  gap: 30px;
}

.advantage-card {
  flex: 1;
  text-align: center;
  padding: 30px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.advantage-card .card-icon {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 20px;
}

.advantage-card h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.advantage-card p {
  font-size: 14px;
  color: #666;
}

/* 合作伙伴样式 */
.partners {
  padding: 80px 0;
  background-color: #f5f7fa;
}

.partner-logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.partner-logos img {
  max-height: 80px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.partner-logos img:hover {
  opacity: 1;
}

/* 联系方式样式 */
.contact {
  padding: 80px 0;
}

.contact-content {
  display: flex;
  gap: 50px;
}

.contact-info {
  flex: 1;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.info-item i {
  font-size: 24px;
  color: #409eff;
  margin-right: 20px;
  margin-top: 5px;
}

.info-item h4 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.info-item p {
  font-size: 16px;
  color: #666;
}

.contact-form {
  flex: 1;
  background-color: #f5f7fa;
  padding: 30px;
  border-radius: 10px;
}
</style>
